<template>
  <!-- 协议文档 -->
  <div>
    <div class="middle-box">
      <span class="title"> 协议文档 </span>
    </div>
    <div class="btn">
      <span class="btn_left">
        <el-button type="primary" @click="createNew">新增</el-button>
        <el-button @click="batchDelete">删除</el-button>
      </span>
      <span class="btn_right">
        <el-button size="small">
          <el-icon style="margin-right: 2px; margin-bottom: 2px"
            ><RefreshRight /></el-icon
          >刷新
        </el-button>
      </span>
    </div>
    <el-table
      border
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      :cell-class-name="tableCellClassName"
      @cell-click="cellClick"
      v-loading="loading"
    >
      <el-table-column align="center" type="selection" width="50" fixed />
      <el-table-column align="center" label="协议种类" prop="protocolType">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === rowIndex && scope.column.index === columnIndex
            "
          >
            <selectDown
              v-model:modelData="scope.row.protocolType"
              ref="truckCodeRef"
              placeholder="请输入"
              urlType="currency"
              urlQueryData="账户类别"
              @getOption="getTruckCodeData($event, scope.$index)"
            >
            </selectDown>
          </div>
          <span v-else>
            {{ scope.row.protocolType }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="160"
        label="协议编号"
        prop="protocolCode"
      >
        <template #default="scope">
          <div
            v-if="
              scope.row.index === rowIndex && scope.column.index === columnIndex
            "
          >
            <el-input
              v-model="scope.row.protocolCode"
              ref="ctnSealRef"
              clearable
              size="small"
              placeholder="请输入"
            ></el-input>
          </div>
          <span v-else>
            {{ scope.row.protocolCode }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="464"
        label="协议期限"
        prop="protocolDate"
      >
        <template #default="scope">
          <div
            v-if="
              scope.row.index === rowIndex && scope.column.index === columnIndex
            "
          >
            <el-date-picker
              v-model="scope.row.protocolDate"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </div>
          <span v-else>
            {{ scope.row.beginDate }} - {{ scope.row.endDate }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="签订时间" prop="signDate">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === rowIndex && scope.column.index === columnIndex
            "
          >
            <el-date-picker
              v-model="scope.row.signDate"
              type="datetime"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择"
            />
          </div>
          <span v-else>
            {{ scope.row.signDate }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="签订人" prop="singer">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === rowIndex && scope.column.index === columnIndex
            "
          >
            <el-input
              v-model="scope.row.singer"
              ref="ctnSealRef"
              clearable
              size="small"
            >
            </el-input>
          </div>
          <span v-else>
            {{ scope.row.singer }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="备注" prop="remark">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === rowIndex && scope.column.index === columnIndex
            "
          >
            <el-input
              v-model="scope.row.remark"
              ref="ctnSealRef"
              clearable
              size="small"
            >
            </el-input>
          </div>
          <span v-else>
            {{ scope.row.remark }}
          </span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 创建银行信息 -->
    <el-dialog
      title="协议文档"
      v-model="dialogData.create_bankInfo_show"
      width="448px"
    >
      <el-form
        :model="formData"
        :rules="formRules"
        label-width="70px"
        label-suffix=":"
        ref="form"
      >
        <el-row>
          <el-col>
            <el-form-item label="协议类型" prop="protocolType">
              <el-select
                v-model="formData.protocolType"
                placeholder="请输入"
                clearable
                size="small"
                fit-input-width
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="协议编号" prop="protocolCode">
              <el-input
                v-model="formData.protocolCode"
                fit-input-width
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="协议期限" prop="protocolDate">
              <el-date-picker
                v-model="formData.protocolDate"
                type="datetimerange"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="签订时间" prop="signDate">
              <el-date-picker
                v-model="formData.signDate"
                type="datetime"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="请选择"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="签订人" prop="singer">
              <el-input
                v-model="formData.singer"
                style="max-width: 600px"
                clearable
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="formData.remark"
                style="max-width: 600px"
                clearable
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel" type="default" size="small"
            >取消</el-button
          >
          <el-button
            type="primary"
            size="small"
            style="background: #5d9df5"
            @click="next"
            >保存</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent, toRaw } from "vue";
import selectDown from "./selectDown.vue";
import { ElMessageBox } from "element-plus";
export default defineComponent({
  components: {
    selectDown,
  },
  props: {
    isNew: {
      type: Boolean,
      default: ""
    },
    //详细数据
    detailData: {
      type: Object,
      default: () => {},
    },
    option: {
      type: Array,
      default: () => [],
    },
  },
  emits: ["update:detailData"],
  computed: {
    data: {
      get() {
        return this.detailData;
      },
      set(value) {
        this.$emit("update:detailData", value);
      },
    },
  },
  data() {
    return {
      tableData: [],
      compareTableData: [],
      formData: {
        beginDate: "",
        contactComId: "",
        createBy: "",
        createTime: "",
        endDate: "",
        id: "",
        isDeleted: false,
        protocolCode: "",
        protocolType: "",
        relationType: "",
        remark: "",
        signDate: "",
        singer: null,
        updateBy: "",
        updateTime: "",
        protocolDate: [],
      },
      columnIndex: -1,
      rowIndex: -1,
      formRules: {
        protocolNo: [
          { required: true, message: "请输入协议编号", trigger: "blur" },
        ],
      },
      time: "",
      tableSelect: [],
      loading: false,
      dialogData: {
        create_bankInfo_show: false,
      },
      isUpdatess: false,
      options: [
        {
          value: "股份有限公司",
          label: "股份有限公司",
        },
        {
          value: "科技有限公司",
          label: "科技有限公司",
        },
        {
          value: "互联网公司",
          label: "互联网公司",
        },
        {
          value: "制造业公司",
          label: "制造业公司",
        },
        {
          value: "石油公司",
          label: "石油公司",
        },
      ],
    };
  },
  methods: {
    async getList() {
      let res = await this.$http.get("/api/crprotocol/queryby", {
        Id: this.$route.query.id,
      });
      console.log("协议文档", res);
      if (res.data != null && res.data.length) {
        res.data.map((item) => {
          (item["protocolDate"] = []),
            item["protocolDate"].push(item.beginDate);
          item["protocolDate"].push(item.endDate);
          return item;
        });
      }
      this.tableData = res.data;
      this.compareTableData = JSON.parse(JSON.stringify(res.data))
    },
    resetTableData() {
      this.tableData = JSON.parse(JSON.stringify(this.compareTableData))
    },
    // 新增
    createNew() {
      this.closeDiag();
      this.dialogData.create_bankInfo_show = true;
    },
    handleSelectionChange(val) {
      let arr = [];
      for (let item of val) {
        let ret = toRaw(item);
        if (ret !== undefined) {
          arr.push(ret);
        }
      }
      this.tableSelect = arr;
    },
    // 批量删除
    batchDelete() {
      let deleteSelectArray = [];
      if (this.tableSelect.length > 0) {
        deleteSelectArray = this.tableSelect.map((item) => {
          return item.id;
        });

        ElMessageBox.confirm("确定删除所选开户银行信息吗", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
            for (let i = 0; i < deleteSelectArray.length; i++) {
              this.tableData = this.tableData.filter(
                (item) => item.id != deleteSelectArray[i]
              );
            }
          }).catch(() => {
            this.$message.info("取消删除");
          });
      } else {
        this.$message.warning("请先选择");
      }
    },
    closeDiag() {
      (this.formData.protocolCode = ""),
        (this.formData.protocolType = ""),
        (this.formData.beginDate = ""),
        (this.formData.endDate = ""),
        (this.formData.remark = ""),
        (this.formData.signDate = ""),
        (this.formData.singer = ""),
        (this.formData.protocolDate = []),
        this.$nextTick(() => {
          this.$refs.form.clearValidate();
        });
    },
    cancel() {
      this.dialogData.create_bankInfo_show = false;
      this.$refs.form.clearValidate();
    },
    async next() {
      // 点击新增
      await this.$refs.form.validate();
      
      this.tableData.push({
        beginDate: this.formData.protocolDate[0],
        contactComId: this.$route.query.id,
        createBy: "",
        createTime: "2024-7-12 12:00:00",
        endDate: this.formData.protocolDate[1],
        id: this.tableData.length + 1,
        isDeleted: false,
        protocolCode: this.formData.protocolCode,
        protocolType: this.formData.protocolType,
        relationType: "",
        remark: this.formData.remark,
        signDate: this.formData.signDate,
        singer: this.formData.singer,
        updateBy: "",
        updateTime: "",
        protocolDate: this.formData.protocolDate,
      });

      console.log(this.formData);

      this.dialogData.create_bankInfo_show = false;
    },
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      column.index = columnIndex;
      row.index = rowIndex;
    },
    //单元格被点击时会触发该事件
    cellClick(row, column, cell, event) {
      this.rowIndex = row.index;
      this.columnIndex = column.index;
    },
    //输入框失去焦点事件
    inputBlur(scope) {
      this.rowIndex = -1;
      this.columnIndex = -1;
    },
  },
  watch: {
    tableData: {
      handler: async function(newVal) {
        if(this.isUpdatess) {
          this.$emit('protocolDocumentData', newVal)
          this.$emit('acceptData', newVal)
        }
        this.isUpdatess = true
      },
      deep: true,
    },
  },
  mounted() {
    this.getList();
  },
});
</script>

<style lang="scss" scoped>
.middle-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title {
    border-left: 2px solid #5d9df5;
    padding-left: 4px;
    font-size: 16px;
    font-weight: 600;
  }
}
::v-deep .el-dialog {
  padding: 0 !important;
}
::v-deep .el-dialog__title {
  margin: 8px 0px 0px 16px;
  font-weight: 600;
}
::v-deep .el-dialog__header {
  display: flex;
  align-items: center;
  height: 36px;
  border-bottom: 1px solid #dee1e6;
}
::v-deep .el-dialog__footer {
  height: 40px;
  display: flex;
  justify-content: center;
  border-top: 1px solid #dee1e6;
}
::v-deep .dialog-footer {
  height: 24px;
}
::v-deep .el-dialog__body {
  padding-bottom: 0;
}
.btn {
  margin: 8px 0;
  display: flex;
  justify-content: space-between;
}
</style>
